<template>
  <div>
    <PageWrapper
      :title="t('routes.demo.workFlow.flowExamplePage.processInstance')"
      contentBackground
      :dense="true"
      :contentFullHeight="true"
    >
      <div style="padding: 20px">
        <Form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" labelAlign="left">
          <Row>
            <Col :span="12" :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <FormItem :label="t('routes.demo.workFlow.flowExamplePage.code')">
                <span>{{ form.dh }}</span>
              </FormItem>
              <FormItem :label="t('routes.demo.workFlow.flowExamplePage.name')">
                <span>{{ form.workflow }}</span>
              </FormItem>
              <FormItem :label="t('routes.demo.workFlow.flowExamplePage.status')">
                <span>{{ form.changeState }}</span>
              </FormItem>
            </Col>
            <Col :span="12" :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <FormItem :label="t('routes.demo.workFlow.flowExamplePage.creator')">
                <span>{{ form.creator }}</span>
              </FormItem>
              <FormItem :label="t('routes.demo.workFlow.flowExamplePage.createTime')">
                <span>{{ form.createTime }}</span>
              </FormItem>
            </Col>
          </Row>
        </Form>
        <Divider style="width: 100vw" />
        <Row>
          <Col :span="6" :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <BasicTree
              :treeData="fileList"
              :replaceFields="{ key: 'oid', title: 'filename' }"
              @select="setSelectedKeys"
            />
          </Col>
          <Col :span="18" :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
            <BasicTable @register="registerTable" :data-source="flowExampleList" />
          </Col>
        </Row>
      </div>
    </PageWrapper>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { BasicTree } from '/@/components/Tree/index';
  import { Row, Col, Form, FormItem, Divider } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';
  import { Dayjs } from 'dayjs';
  import { BasicTable, useTable } from '/@/components/Table';
  import { getFlowDetailColumns } from './flowData';
  import { flowDetailApi } from '/@/api/demo/flow';
  import { useRoute } from 'vue-router';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  const route = useRoute();

  const labelCol = { span: 4 };
  const wrapperCol = { span: 20 };
  const isFirst = ref<boolean>(true);
  const oid = ref<string>('');
  const flowExampleList = ref<any[]>([]);
  const fileList = ref<any[]>([]);

  interface formState {
    dh: string;
    workflow: string;
    changeState: string;
    creator: string;
    createTime: Dayjs | undefined;
  }
  const form = ref<formState>({
    dh: '',
    workflow: '',
    changeState: '',
    creator: '',
    createTime: undefined,
  });

  watch(
    () => route.name,
    (to) => {
      if (to === 'flowExample') {
        getDataList();
      }
    },
  );

  const [registerTable] = useTable({
    columns: getFlowDetailColumns(),
    showIndexColumn: false,
    showTableSetting: false, // 表格设置工具配置
    bordered: true,
    canResize: false,
  });

  const setSelectedKeys = (keys) => {
    isFirst.value = false;
    oid.value = keys[0];
    getDataList();
  };

  const getDataList = () => {
    if (isFirst.value) {
      const params = {
        StepInsId: '',
        WfInsId: route.params.wfInsId,
        OId: oid.value,
      };
      flowDetailApi(params).then((res) => {
        if (res.filelist !== null) {
          oid.value = res.filelist[0].oid;
        }
        const newParams = {
          StepInsId: '',
          WfInsId: route.params.wfInsId,
          OId: oid.value,
        };
        flowDetailApi(newParams).then((res) => {
          form.value.dh = res.wfinsid;
          form.value.workflow = res.wfinsname;
          form.value.changeState = res.wfinstate;
          form.value.creator = res.wfinscreatorname;
          form.value.createTime = res.wfinscreatetime;
          flowExampleList.value = res.steplist;
          fileList.value = res.filelist;
        });
      });
    } else {
      const params = {
        StepInsId: '',
        WfInsId: route.params.wfInsId,
        OId: oid.value,
      };
      flowDetailApi(params).then((res) => {
        form.value.dh = res.wfinsid;
        form.value.workflow = res.wfinsname;
        form.value.changeState = res.wfinstate;
        form.value.creator = res.wfinscreatorname;
        form.value.createTime = res.wfinscreatetime;
        flowExampleList.value = res.steplist;
        fileList.value = res.filelist;
      });
    }
  };
  getDataList();
</script>
<style lang="less" scoped>
  .over-ellipsis {
    display: block;
    width: calc(100% - 50px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: 1;
  }
</style>
